<template>
  <div>
    <div class="edit-form-vue frame-page h-panel">
      <Form :label-width="110" :model="data" ref="form" :rules="rules" :showErrorTip="showErrorTip" 
      :validOnChange="false"
      labelPosition="left">        
        <FormItem label="父级" prop="parent_id">
          <Select v-model="data.parent_id" :datas="adminMenu" :filterable="true"></Select>
        </FormItem>
<FormItem label="排序" prop="order">
          <NumberInput v-model="data.order" :precision="0"></NumberInput>
        </FormItem>
<FormItem label="名称" prop="title" :required="required">
          <input type="text" v-model="data.title" />
        </FormItem>
<FormItem label="图标" prop="icon" :required="!data.parent_id || data.parent_id == 0">
          <Select v-model="data.icon" :datas="iconsList">
            <template slot="show" slot-scope="{value}"><i :class="value.title"></i> {{value.title}}</template>    
            <template slot-scope="{item}" slot="item"><div><i :class="`${item.key}`"></i> {{item.title}}</div></template>
          </Select>
        </FormItem>
<FormItem label="Key" prop="key" :required="data.parent_id>0">
          <Select v-model="data.key" :datas="routes" :filterable="true"></Select>
        </FormItem>
<FormItem label="状态" prop="show">
          <h-switch :small="true" v-model="data.show" />
          </h-switch>
        </FormItem>
      </Form>
    </div>
    <footer class="h-modal-footer">   
      <Button class="h-btn" color="primary" @click="submit">确定</Button>  
      <Button class="h-btn" @click="close">关闭</Button>
    </footer>
  </div>
</template>
<script>
import oss from 'components/common/oss';

export default {
  props: {
    params: Object,
  },
  components: {
    Oss: oss
  },
  data() {
    return {
      required: true,
      showErrorTip: true,
      dict:[],
      routes:[],
      adminMenu:[],
      data: {
        
      },
      icons: [
        'icon-eye',
        'icon-paper-clip',
        'icon-mail',
        'icon-toggle',
        'icon-layout',
        'icon-link',
        'icon-bell',
        'icon-lock',
        'icon-unlock',
        'icon-ribbon',
        'icon-image',
        'icon-signal',
        'icon-target',
        'icon-clipboard',
        'icon-clock',
        'icon-watch',
        'icon-air-play',
        'icon-camera',
        'icon-video',
        'icon-disc',
        'icon-printer',
        'icon-monitor',
        'icon-server',
        'icon-cog',
        'icon-heart',
        'icon-paragraph',
        'icon-align-justify',
        'icon-align-left',
        'icon-align-center',
        'icon-align-right',
        'icon-book',
        'icon-layers',
        'icon-stack',
        'icon-stack-2',
        'icon-paper',
        'icon-paper-stack',
        'icon-search',
        'icon-zoom-in',
        'icon-zoom-out',
        'icon-reply',
        'icon-circle-plus',
        'icon-circle-minus',
        'icon-circle-check',
        'icon-circle-cross',
        'icon-square-plus',
        'icon-square-minus',
        'icon-square-check',
        'icon-square-cross',
        'icon-microphone',
        'icon-record',
        'icon-skip-back',
        'icon-rewind',
        'icon-play',
        'icon-pause',
        'icon-stop',
        'icon-fast-forward',
        'icon-skip-forward',
        'icon-shuffle',
        'icon-repeat',
        'icon-folder',
        'icon-umbrella',
        'icon-moon',
        'icon-thermometer',
        'icon-drop',
        'icon-sun',
        'icon-cloud',
        'icon-cloud-upload',
        'icon-cloud-download',
        'icon-upload',
        'icon-download',
        'icon-location',
        'icon-location-2',
        'icon-map',
        'icon-battery',
        'icon-head',
        'icon-briefcase',
        'icon-speech-bubble',
        'icon-anchor',
        'icon-globe',
        'icon-box',
        'icon-reload',
        'icon-share',
        'icon-marquee',
        'icon-marquee-plus',
        'icon-marquee-minus',
        'icon-tag',
        'icon-power',
        'icon-command',
        'icon-alt',
        'icon-esc',
        'icon-bar-graph',
        'icon-bar-graph-2',
        'icon-pie-graph',
        'icon-star',
        'icon-arrow-left',
        'icon-arrow-right',
        'icon-arrow-up',
        'icon-arrow-down',
        'icon-volume',
        'icon-mute',
        'icon-content-right',
        'icon-content-left',
        'icon-grid',
        'icon-grid-2',
        'icon-columns',
        'icon-loader',
        'icon-bag',
        'icon-ban',
        'icon-flag',
        'icon-trash',
        'icon-expand',
        'icon-contract',
        'icon-maximize',
        'icon-minimize',
        'icon-plus',
        'icon-minus',
        'icon-check',
        'icon-cross',
        'icon-move',
        'icon-delete',
        'icon-menu',
        'icon-archive',
        'icon-inbox',
        'icon-outbox',
        'icon-file',
        'icon-file-add',
        'icon-file-subtract',
        'icon-help',
        'icon-open',
        'icon-ellipsis'
      ],
      options: {
        filters: {
          mime_types: [
            { title: 'Image files', extensions: 'jpg,gif,png,jpeg,bmp' }
          ]
        }
      },
      rules: {required:['order','title','show']}
    };
  },
  watch: {
    required() {
      this.$refs.form.resetValid();
    }
  },
  mounted(){    
    this.routes = this.$router.options.routes[1]['children'].map(item=>{
      let title = `${item.meta.title}(${item.path})`;
      let key = item.name;
      return {title,key};
    });
    log(this.routes);
    this.initDict();
    this.data = this.params;
  },
  methods: {
    initDict (){
      R.adminMenu.dict().then(resp=>{
                  this.adminMenu = resp.data;
                });
    },
    submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let data = Object.assign({},this.data);
        if(data.tags){
          data.tags = data.tags.join(',');
        }        
        R.adminMenu.store(data).then(resp => {
            if(resp.code==200){
              this.$Message.success(resp.message);
            }else{
              this.$Message.warn(resp.message);
            }          
        });
        this.$emit('success');
        this.close();
      }
    },
    close() {   
      this.$emit('close');
    },
    reset() {
      this.$refs.form.resetValid();
    }
  },
  computed: {
    iconsList(){
      return this.icons.map(val=>{
        return {title:val,key:val};
      })
    } 
  }
};
</script>